<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加计划</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/systemStatic/style/admin.css">
    <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/css/public.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
</head>
<body>

<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form  addJobForm" action="" lay-filter="addJobForm" onsubmit="return false">
            <!--隐藏域属性配置 -->
            <input id="planJson" name="planJson" type="hidden" />
            <input id="jobName" name="jobName" type="hidden" value="${jobName}" />
            <!---------------------------------->
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin:0;">
                    <button lay-submit lay-filter="saveTrigger" class="layui-btn layui-btn-sm"><i class="iconfont iconicon_baocun"></i> 保存</button>
                    <a  class="layui-btn layui-btn-sm viewTriggerList"><i class="layui-icon layui-icon-return"></i>返回</a>
                </div>
            </div>
            <table class="table-detail" cellpadding="0" cellspacing="0" border="0">
                <tr>

                    <th width="20%">计划名称: </th>
                    <td>
                        <input type="text" id="name" name="name" class="inputText" size="40"/>
                    </td>
                </tr>
                <tr>
                    <th colspan="2"  style="text-align: left;padding-left: 5px;">
                        执行计划的方式
                    </th>
                </tr>
                <tr>
                    <th width="20%"><input type="radio" value="1"  name="rdoTimeType" />一次: </th>
                    <td>
                        开始:
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="onceTimeYMD" placeholder="yyyy-MM-dd">
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="onceTime" placeholder="HH:mm:ss">
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th width="20%"><input type="radio" checked="checked" value="2" name="rdoTimeType" />每天:  </th>
                    <td>
                        <select id="selEveryDay">
                            <option value="1">1分钟</option>
                            <option value="5">5分钟</option>
                            <option value="10">10分钟</option>
                            <option value="15">15分钟</option>
                            <option value="30">30分钟</option>
                            <option value="60">1小时</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th width="20%"><input type="radio"  value="3" name="rdoTimeType" />每天:  </th>
                    <td>
                        <div class="layui-input-inline">
                          <select id="txtDayHour">
                            <#list 0..23 as index>
                            <option value="${index}">${index}时</option>
                            </#list>
                          </select>
                        </div>
                        <div class="layui-input-inline">
                          <select id="txtDayMinute">
                            <#list 0..55 as index>
                              <#if index%5==0>
                                 <option value="${index}">${index}分</option>
                              </#if>
                            </#list>
                            <option value="59">59分</option>
                          </select>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th width="20%"><input type="radio" value="4" name="rdoTimeType" />每周:  </th>
                    <td id="chkWeekTD">
                        <input type="checkbox" name="chkWeek" lay-skin="primary"  value="MON"/>星期一&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="checkbox" name="chkWeek" lay-skin="primary"  value="TUE"/>星期二&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="checkbox" name="chkWeek" lay-skin="primary"  value="WED"/>星期三&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="checkbox" name="chkWeek" lay-skin="primary"  value="THU"/>星期四&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="checkbox" name="chkWeek" lay-skin="primary"  value="FRI"/>星期五&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="checkbox" name="chkWeek" lay-skin="primary"  value="SAT"/>星期六&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="checkbox" name="chkWeek" lay-skin="primary"  value="SUN"/>星期日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
                        <div  class="layui-input-inline">
                          <select id="txtWeekHour">
                            <#list 0..23 as index>
                              <option value="${index}">${index}时</option>
                            </#list>
                          </select>
                        </div>
                        <div  class="layui-input-inline">
                          <select id="txtWeekMinute">
                            <#list 0..55 as index>
                              <#if index%5==0>
                                <option value="${index}">${index}分</option>
                              </#if>
                            </#list>
                            <option value="59">59分</option>
                          </select>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th width="20%"><input type="radio" value="5" name="rdoTimeType" />每月:</th>
                    <td  id="chkMonTD">
                        <#list 1..31 as index>
                          <span><input type="checkbox" name="chkMon" lay-skin="primary" value="${index}"/>${index}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        </#list>

                        <input type="checkbox" name="chkMon" lay-skin="primary" value="L"/>最后一天<br/>
                    <div class="layui-input-inline">
                        <select id="txtMonHour">
                            <#list 0..23 as index>
                              <option value="${index}">${index}时</option>
                            </#list>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select id="txtMonMinute">
                            <#list 0..55 as index>
                              <#if index%5==0>
                                <option value="${index}">${index}分</option>
                              </#if>
                            </#list>
                            <option value="59">59分</option>
                        </select>
                    </div>
                    </td>
                </tr>
                <tr>
                    <th width="20%"><input type="radio" value="6" name="rdoTimeType" />Cron表达式:</th>
                    <td><input type="text" id="txtCronExpression" name="txtCronExpression" /></td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script src="${ctx}/public/component.js" type="text/javascript"></script>
<script src="${ctx}/layui/layui.js"></script>
<script>
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','form', 'layer',  'setter', 'commons', 'jquery','table'],function(){
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer,
            commons = layui.commons,
            laydate = layui.laydate,
            setter = layui.setter;


        form.render();
        var index = parent.layer.getFrameIndex(window.name);
        //保存
        form.on('submit(saveTrigger)', function (data) {
            data.field.planJson = packTriggerToJson();
            var triggerName = $("#name").val();
            if(!triggerName){
                layer.alert("请输入计划名称！");
                return;
            }
            $.ajax({
                url: serverPath.systemPath + setter.sysLinkPath + "scheduler/addTrigger",
                type: "POST",
                data: data.field,
                dataType: 'json',
                success: function (data) {
                    if(commons._filterRecord(data)){
                        layer.alert(data.msg,function () {
                            layer.close(index);
                            location.href = serverPath.systemPath+setter.sysLinkPath+'scheduler/view/triggerList?jobName='+$("#jobName").val() ;
                        });
                    }else{
                        layer.msg(data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert("保存失败！" + XMLHttpRequest.status);
                }
            });
        });
        //返回
        $(".viewTriggerList").click(function(){
            $(this).attr("href", serverPath.systemPath+setter.sysLinkPath +"scheduler/view/triggerList?jobName="+$("#jobName").val());
        });
        //时间选择器 一次
        laydate.render({
            elem: '#onceTime'
            ,type: 'time'
        });
        //年月日选择器 一次
        laydate.render({
            elem: '#onceTimeYMD'
        });

        /**
         * 根据复选框的名称获取选中值，使用逗号分隔。
         *
         * @param tdName td的id
         * @param name
         * @returns {String}
         */
        function getChkValue(tdName,name) {
            var str = "";
            $('#'+tdName+" div").each(function() {
                var divClass = $(this).attr('class');
                if (divClass && divClass.search("layui-form-checked")!=-1) {
                    str += $(this).prev().val() + ",";
                }
            });
            if (str != "")
                str = str.substring(0, str.length - 1);
            return str;
        }
        /**
         * 封装定时计划数据成json格式
         */
        function packTriggerToJson(){
            var triggerType = $("input[name=rdoTimeType]:checked").val();
            var json='{"type":'+triggerType+',"timeInterval":"_timeInterval_"}';
            switch (triggerType) {
                case "1":
                    return json.replace("_timeInterval_",$("#onceTimeYMD").val()+" "+$("#onceTime").val());
                case "2":
                    return json.replace("_timeInterval_",$("#selEveryDay").val());
                case "3":
                    return json.replace("_timeInterval_",$("#txtDayHour").val()+":"+$("#txtDayMinute").val());
                case "4":
                    return json.replace("_timeInterval_",
                        getChkValue("chkWeekTD","chkWeek")+"|"+$("#txtWeekHour").val()+":"+$("#txtWeekMinute").val());
                case "5":
                    return json.replace("_timeInterval_",
                        getChkValue("chkMonTD","chkMon")+"|"+$("#txtMonHour").val()+":"+$("#txtMonMinute").val());
                case "6":
                    return json.replace("_timeInterval_",$('#txtCronExpression').val());
            }
        }
    });
</script>
</body>
</html>